<template>
	<view v-if="orderDeliveryItem">
		<view class="cargo-info_body" >
			<u-form :model="querys" label-position="top">
				<u-form-item label="发货单" :border-bottom="false">
					<view class="unclickable-input u-flex " @click="shows.orderDelivery = true">
						<view class="u-flex-1">{{orderDeliveryItem.id}}</view>
						<u-icon name="arrow-down" color="#97989C"></u-icon>
					</view>
				</u-form-item>
			</u-form>
			<view class="u-flex vehicle-info_body">
				<view class="picture">
					<image
						src="https://img1.baidu.com/it/u=3291763551,2568659664&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
					</image>
				</view>
				<view class="u-margin-left-20 vehicle-info_info">
					<view class="status">
						{{getStatusLabel(orderLogisticsType,orderDeliveryItem.carOutApply.status)}}
					</view>
					<view class="name">{{orderDeliveryItem.productInfo}}</view>
				</view>
			</view>
			<view class="tags">
				<view class="tag" v-for="(item,index) in orderDeliveryItem.vinList" :key="index">
					{{item}}
				</view>
			</view>
		</view>
		<block v-if="orderDeliveryItem.approvalLogList && 
		orderDeliveryItem.approvalLogList.length>0">
			<u-line color="#F2F2F2" />
			<view class="logistics">
				<view v-for="(item,index) in orderDeliveryItem.approvalLogList" :key="index">
					<view class="u-flex">
						<view class="time-status">
							<image src="@/static/img/icon_select_pre (3).png"></image>
						</view>
						<view class="time-title">
							{{item.nodeName}}
						</view>
					</view>
					<view class="content-body">
						<view class="vertical-line" >
							<view class="line" v-if="orderDeliveryItem.approvalLogList.length>index+1"></view>
						</view>
						<view class="time-content">
							<view class="u-margin-bottom-20" v-if="item.nodeComments">{{item.nodeComments}}</view>
							<view>{{item.timeCreate | dateYMDHMSFormat}}</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<u-select value-name="id" label-name="id" v-model="shows.orderDelivery" mode="single-column"
			:list="ruleForm.orderDeliveryList" @confirm="handleOrderDeliveryConfirm"></u-select>
	</view>
</template>

<script>
	import {
		orderLogisticsType,
		getStatusLabel
	} from '@/utils/status.js'
	export default {
		data() {
			return {
				orderId: null,
				ruleForm: {},
				orderDeliveryItem: null,
				orderLogisticsType,
				shows: {
					orderDelivery: false
				}
			}
		},
		onLoad(options) {
			this.orderId = options.id
			this.getById()
		},
		methods: {
			handleOrderDeliveryConfirm(list) {
				const item = this.ruleForm.orderDeliveryList.find(x => {
					return x.id === list[list.length - 1].value
				})
				this.orderDeliveryItem = item
			},
			async getById() {
				uni.showLoading({
					title: '加载中...'
				});
				this.ruleForm = {}
				const res = await this.$api.getOrderById({
					id: this.orderId
				})
				this.ruleForm = res.result || {}
				if (res.result.orderDeliveryList.length > 0) {
					// 发货信息
					this.orderDeliveryItem = res.result.orderDeliveryList[0]
				}
				uni.hideLoading();
			},
			getStatusLabel
		}
	}
</script>

<style scoped lang="less">
	.cargo-info_body {
		margin: 15px 20px;

		.vehicle-info_body {
			.picture {
				width: 80px;
				height: 60px;

				&>image {
					width: 100%;
					height: 100%;
				}
			}

			.vehicle-info_info {
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				height: 60px;
				padding-left: 10px;
				padding-top: 5px;
				padding-bottom: 5px;

				.status {
					font-size: 16px;
					color: #202020;
					font-weight: bold;
				}

				.name {
					font-size: 13px;
					color: #666666;
				}
			}
		}

		.tags {
			display: flex;
			flex-wrap: wrap;
			margin-top: 5px;

			.tag {
				margin-right: 5px;
				margin-top: 5px;
				height: 22px;
				background: rgba(15, 189, 127, 0.07);
				border-radius: 3px;
				font-size: 11px;
				color: #0FBD7F;
				line-height: 12px;
				padding: 5px 8px;
			}
		}
	}

	.logistics {
		margin: 15px 20px;

		.time-status {
			width: 16px;
			height: 16px;
			margin-right: 19px;

			&>image {
				width: 100%;
				height: 100%;
			}
		}

		.time-title {
			font-size: 14px;
			color: #202020;
		}

		.content-body {
			display: flex;
			margin: 10px 0;

			.vertical-line {
				width: 16px;
				height: auto;
				margin-right: 19px;
				display: flex;
				justify-content: center;

				.line {
					width: 1px;
					background: rgba(15, 189, 127, 0.28);
					;
				}
			}

			.time-content {
				background: #F7F7F7;
				border-radius: 8px;
				padding: 10px 12px;
				font-size: 12px;
				color: #666666;
				flex: 1;
			}
		}
	}
</style>